<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 400px;
            height: auto;
            overflow: hidden;
            border: 5px solid black;
            margin: 20px auto;
        }
        #box input {/*计算机显示器*/
            width:320px;
            height:70px;
            border: 2px solid black;
            margin: 30px 35px ;
        }
        #box ul {
            margin: 0px 12px;
        }
        #box ul li {
            list-style: none;
            /*border: 2px solid red;*/
            width: 90px;
            height: 90px;
            text-align: center;
            float: left;
            margin: 10px 0px;

        }
        #box ul li a
        {
            color: black ;
            text-decoration: none;
            /*border: 1px solid red;*/
            font-size: 50px;
            margin: 10px ;
        }
        #box ul li.button {
            border-top:2px solid black;
            border-bottom:2px solid black;
            border-left:2px solid black;
        }
        #box ul li.button2 {
            border-top:2px solid black;
            border-bottom:2px solid black;
            border-left:2px solid black;
            border-right:2px solid black;
        }
        #box ul li.button3 {
            width: 180px;
            border-top:2px solid black;
            border-bottom:2px solid black;
            border-left:2px solid black;

        }

    </style>
</head>
<body>
   <div id="box">

       <input type="text" >

       <ul>
           <li class="button"> <a href="#">AC</a></li>
           <li class="button"> <a href="#">+/-</a></li>
           <li class="button"> <a href="#">%</a></li>
           <li class="button2"> <a href="#">÷</a></li>
       </ul>

       <ul>
           <li class="button"> <a href="#">7</a></li>
           <li class="button"> <a href="#">8</a></li>
           <li class="button"> <a href="#">9</a></li>
           <li class="button2"> <a href="#">*</a></li>
       </ul>

       <ul>
           <li class="button"> <a href="#">4</a></li>
           <li class="button"> <a href="#">5</a></li>
           <li class="button"> <a href="#">6</a></li>
           <li class="button2"> <a href="#">+</a></li>
       </ul>

       <ul>
           <li class="button"> <a href="#">3</a></li>
           <li class="button"> <a href="#">2</a></li>
           <li class="button"> <a href="#">1</a></li>
           <li class="button2"> <a href="#">-</a></li>
       </ul>

       <ul>
           <li class="button3"> <a href="#">0</a></li>
           <li class="button"> <a href="#">.</a></li>
           <li class="button2"> <a href="#">=</a></li>
       </ul>

   </div>

</body>
</html>